<template>
	<view>
		<custom-header :title="title" sticky />
		<view class="_wrap">
			<!-- 花材信息 -->
			<view class="flower_info">
				<view class="title">
					<view class="title-text">花材信息</view>
				</view>
				<view class="info">
					<view class="supplier_base">
						<view class="supplier_name">五洲花卉</view>
						<view class="base_name">红塔基地</view>
					</view>
					<view class="info_item">
						高原红<text class="grade">D级</text>×5/8
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						单价:￥8.00
					</view>
					<view class="info_item">
						总价:￥64.00
					</view>
				</view>
				<view class="info">
					<view class="phone" @click="makeCall">
						<view class="label">商户电话</view>
						<view class="value">17849466865</view>
						<view class="icon">
							<image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit" />
						</view>
					</view>
				</view>
			</view>
			<!-- 操作 -->
			<view class="operation_wrap">
				<view class="title">
					<view class="title-text">操作</view>
					<view class="title-btn" @click="handleGoOperationLog">
						<view class="icon">
							<image src="/static/home/log.png" mode=""></image>
						</view>
						<view class="text">操作日志</view>
						<view class="right_icon">
							<up-icon name="arrow-right" size="28rpx"></up-icon>
						</view>
					</view>
				</view>
				<view class="operation">
					<view class="o_list" :class="{active:item.value == operationValue}"
						v-for="(item,index) in operationList" :key="index" @click="handleSelectOperation(item.value)">
						{{ item.lable }}
					</view>
				</view>
			</view>

			<!-- 已配货-详情 -->
			<view class="form_wrap detail_wrap"
				v-if="(operationValue==1&&stockoutForm.isSave) || operationValue==3&&demotionForm.isSave">
				<view class="title">
					<view class="title-text">{{ operationValue==1?'质检类型':'降级' }}</view>
					<view class="title-btn" @click="handleRevocation">撤销</view>
				</view>
				<view class="form_item" v-if="operationValue==1">
					处罚类型：{{ stockoutForm.type }}
				</view>
				<view class="form_item" v-if="operationValue==3">
					降级前：A级
				</view>
				<view class="form_item" v-if="operationValue==3">
					降级后：<text class="red">{{ demotionForm.type }}</text>
				</view>
				<view class="form_item">
					处罚金额：3.15元
				</view>
				<view class="form_item">
					处罚数量：
					<text v-if="operationValue==1">
						{{ stockoutForm.number || '--'}}扎
					</text>
					<text v-if="operationValue==3">
						{{ demotionForm.number || '--'}}扎
					</text>
				</view>
				<view class="form_item">
					花材备注：
					<text v-if="operationValue==1">
						{{ stockoutForm.remark || '--'}}
					</text>
					<text v-if="operationValue==3">
						{{ demotionForm.remark || '--'}}
					</text>
				</view>
				<view class="form_item">
					图片凭证
					<text v-if="operationValue==1 && (!stockoutForm.imageFiles || !stockoutForm.imageFiles.length)">：--</text>
					<text v-if="operationValue==3 && (!demotionForm.imageFiles || !demotionForm.imageFiles.length)">：--</text>
				</view>
				<view class="upload_wrap">
					<custom-upload v-model="stockoutForm.imageFiles" v-if="operationValue == 1" disabled :delete="false"></custom-upload>
					<custom-upload v-model="demotionForm.imageFiles" v-if="operationValue == 3" disabled :delete="false"></custom-upload>
				</view>
				<view class="form_item">
					视频凭证
					<text v-if="operationValue==1 && (!stockoutForm.videoFiles || !stockoutForm.videoFiles.length)">：--</text>
					<text v-if="operationValue==3 && (!demotionForm.videoFiles || !demotionForm.videoFiles.length)">：--</text>
				</view>
				<view class="upload_wrap">
					<custom-upload v-model="stockoutForm.videoFiles" v-if="operationValue == 1" accept="video" disabled :delete="false"></custom-upload>
					<custom-upload v-model="demotionForm.videoFiles" v-if="operationValue == 3" accept="video" disabled :delete="false"></custom-upload>
				</view>
			</view>

			<!-- 待配货-操作 -->
			<view class="form_wrap" v-else-if="operationValue == 1 || operationValue == 3">
				<view class="title">
					<view class="title-text">{{ operationValue==1?'质检类型':'降级' }}</view>
					<view class="title-btn" @click="handleSave">保存</view>
				</view>
				<!-- 缺货退货-自检类型 -->
				<view class="selfTest_list_wrap" v-if="operationValue == 1">
					<view class="list" :class="{active:item.lable == stockoutForm.type}"
						v-for="(item,index) in selfTestList" :key="index" @click="handleSelectSelfTest(item)">
						{{ item.lable }}
					</view>
				</view>
				<!-- 降级-类型 -->
				<view class="demotion_list_wrap" v-if="operationValue == 3">
					<view class="list" :class="{active:item.lable == demotionForm.type}"
						v-for="(item,index) in demotionList" :key="index" @click="handleSelectDemotion(item)">
						{{ item.lable }}
					</view>
				</view>
				<!-- 数量选择 -->
				<view class="number_wrap">
					<view class="label_title">
						数量选择
					</view>
					<view class="number">
						<custom-number v-model="stockoutForm.number" v-if="operationValue == 1"></custom-number>
						<custom-number v-model="demotionForm.number" v-if="operationValue == 3"></custom-number>
					</view>
				</view>
				<!-- 图片凭证 -->
				<view class="upload_wrap">
					<view class="label_title">
						图片凭证<text class="required">*</text>
					</view>
					<view class="image_wrap">
						<custom-upload v-model="stockoutForm.imageFiles" v-if="operationValue == 1"></custom-upload>
						<custom-upload v-model="demotionForm.imageFiles" v-if="operationValue == 3"></custom-upload>
					</view>
				</view>
				<!-- 视频凭证 -->
				<view class="upload_wrap">
					<view class="label_title">
						视频凭证
					</view>
					<view class="image_wrap">
						<custom-upload v-model="stockoutForm.videoFiles" accept="video" :maxCount="1"
							v-if="operationValue == 1"></custom-upload>
						<custom-upload v-model="demotionForm.videoFiles" accept="video" :maxCount="1"
							v-if="operationValue == 3"></custom-upload>
					</view>
				</view>
				<!-- 花材备注 -->
				<view class="upload_wrap">
					<view class="label_title">
						花材备注
					</view>
					<view class="textarea_wrap">
						<up-textarea v-model="stockoutForm.remark" placeholder="请输入备注内容" height="90rpx"
							v-if="operationValue == 1"></up-textarea>
						<up-textarea v-model="demotionForm.remark" placeholder="请输入备注内容" height="90rpx"
							v-if="operationValue == 3"></up-textarea>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹出层提示 -->
		<custom-toast :show="isShowToast" :config="toastConfig" @cancel="hideToast" @confirm="confirmToast" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const {
		isShowToast,
		toastConfig,
		showToast,
		hideToast
	} = useToast()
	// 弹出层确认
	const confirmToast = (data) => {
		console.log(data)
		// 保存
		if (data?.type == 'save') {
			setTimeout(() => {
				hideToast()
				if (operationValue.value == 1) {
					stockoutForm.value.isSave = true
				}
				if (operationValue.value == 3) {
					demotionForm.value.isSave = true
				}
			}, 800)
		}
		// 取消配货
		else if (data?.type == 'cancelDistribution') {
			setTimeout(() => {
				hideToast()
				uni.navigateBack()
			}, 800)
		}
		// 撤销操作
		else if (data?.type == 'revocation') {
			setTimeout(() => {
				hideToast()
				if (operationValue.value == 1) {
					stockoutForm.value.isSave = false
				}
				if (operationValue.value == 3) {
					demotionForm.value.isSave = false
				}
			}, 800)
		} else {
			hideToast()
		}
	}
	// 标题
	const title = ref('')
	// 操作类型
	const operationValue = ref(null)
	const operationList = ref([{
			lable: '缺货退货',
			value: 1
		},
		{
			lable: '取消配货',
			value: 2
		},
		{
			lable: '降级',
			value: 3
		}
	])
	const handleSelectOperation = (value) => {
		operationValue.value = value
		// 取消配货
		if (value == 2) {
			showToast({
				message: '确定要取消配货吗？',
				showCancel: true,
				data: {
					type: 'cancelDistribution'
				}
			})
		}
	}



	// 缺货退货信息
	const stockoutForm = ref({
		// 类型
		type: '',
		// 数量选择
		number: 1,
		// 图片凭证
		imageFiles: [],
		// 视频凭证
		videoFiles: [],
		// 备注
		remark: '',
		// 是已保存
		isSave: false
	})
	// 降级信息
	const demotionForm = ref({
		// 类型
		type: '',
		// 数量选择
		number: 1,
		// 图片凭证
		imageFiles: [],
		// 视频凭证
		videoFiles: [],
		// 备注
		remark: '',
		// 是已保存
		isSave: false
	})

	// 自检类型
	const selfTestList = ref([{
			lable: '缺货不补',
			value: 1
		},
		{
			lable: '缺货补货',
			value: 2
		},
		{
			lable: '退货不补',
			value: 3
		},
		{
			lable: '退货补货',
			value: 4
		}
	])
	const handleSelectSelfTest = (data) => {
		console.log(data)
		stockoutForm.value.type = data.lable
		console.log(stockoutForm.value)
	}

	// 降级类型
	const demotionList = ref([{
			lable: 'B级',
			value: 1
		},
		{
			lable: 'C级',
			value: 2
		},
		{
			lable: 'D级',
			value: 3
		},
		{
			lable: 'E级',
			value: 4
		},
		{
			lable: 'O级',
			value: 5
		},
	])
	const handleSelectDemotion = (data) => {
		demotionForm.value.type = data.lable
	}

	// 拨打电话
	const makeCall = () => {
		uni.makePhoneCall({
			phoneNumber: '10086'
		})
	}
	// 操作日志
	const handleGoOperationLog = () => {
		uni.navigateTo({
			url: '/pages/operationLog/operationLog'
		})
	}

	// 保存
	const handleSave = () => {
		// 缺货退货
		if (operationValue.value == 1) {
			if (!stockoutForm.value.type) {
				showToast('请选择自检类型')
				return
			}
			if (!stockoutForm.value.imageFiles || !stockoutForm.value.imageFiles.length) {
				showToast('请上传图片凭证')
				return
			}
		}
		// 降级
		else if (operationValue.value == 3) {
			if (!demotionForm.value.type) {
				showToast('请选择降级类型')
				return
			}
			if (!demotionForm.value.imageFiles || !demotionForm.value.imageFiles.length) {
				showToast('请上传图片凭证')
				return
			}
		}

		showToast({
			message: '确定要保存吗？',
			showCancel: true,
			data: {
				type: 'save'
			}
		})
	}
	// 撤销
	const handleRevocation = () => {
		showToast({
			message: '确定要撤销操作吗？',
			showCancel: true,
			data: {
				type: 'revocation'
			}
		})
	}

	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		console.log(options)
		title.value = options.title

		// 根据实际字段自定义调整
		// 已配货显示详情（默认待配货）
		if (options.status == 1) {
			stockoutForm.value = {
				isSave: true,
				type: '退货不补',
				number: 5,
				remark: '嘻嘻哈哈',
				imageFiles: [{
						url: '/static/home/shop.png'
					},
					{
						url: '/static/home/shop.png'
					}
				]
			}
			demotionForm.value = {
				type: 'C级',
				isSave: true,
				number: 1,
				imageFiles: [{
					url: '/static/home/shop.png'
				}, ]
			}
		}
	})
</script>

<style lang="scss">
	._wrap {
		padding: 0 24rpx 40rpx;
	}

	.flower_info,
	.operation_wrap,
	.form_wrap {
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 24rpx 24rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 32rpx;

			.title-text {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.flower_info {
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 24rpx;
			font-size: 28rpx;
			color: #666;

			.supplier_base {
				display: flex;
				align-items: center;

				.base_name {
					padding: 2rpx 8rpx;
					border: 1px solid #F5564D;
					color: #F5564D;
					font-size: 20rpx;
					border-radius: 8rpx;
					margin-left: 8rpx;
				}
			}

			.grade {
				color: #F5564D;
			}

			.phone {
				display: flex;
				align-items: center;

				.value {
					color: #4298FF;
					padding: 0 8rpx;
				}

				.icon {
					width: 18rpx;
					height: 18rpx;
					display: flex;
				}
			}
		}
	}

	.operation_wrap {
		.title {
			.title-btn {
				display: flex;
				align-items: center;

				.text {
					font-size: 24rpx;
					padding: 0 8rpx;
				}

				.icon {
					display: flex;
					width: 23rpx;
					height: 24rpx;

					color: #333333;
				}
			}
		}

		.operation {
			display: flex;
			justify-content: space-between;
			padding-top: 32rpx;

			.o_list {
				width: 172rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 10rpx;
				border: 1px solid #D7D7D7;
				font-size: 24rpx;
				color: #333333;

				&.active {
					background: #FFF0F0;
					color: #F5564D;
					border: 1px solid #F5564D;
				}
			}
		}
	}

	.form_wrap {
		.title-btn {
			color: #F5564D;
			width: 100rpx;
			text-align: right;
			font-size: 28rpx;
		}

		.label_title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;

			.required {
				color: #F5564D;
			}
		}

		.demotion_list_wrap,
		.selfTest_list_wrap {
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;

			.list {
				width: 110rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 16rpx;
				background: #F5F6FA;
				border: 1px solid #F5F6FA;
				font-size: 28rpx;
				color: #666;

				&.active {
					background: #FFF0F0;
					color: #F5564D;
					border: 1px solid #F5564D;
				}
			}
		}

		.selfTest_list_wrap {
			.list {
				width: 148rpx;
			}
		}

		.number_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 32rpx;
		}

		.upload_wrap {
			padding-top: 32rpx;

			.image_wrap,
			.textarea_wrap {
				padding-top: 24rpx;

				.u-textarea {
					border-color: #D7D7D7 !important;
				}
			}
		}
	}

	.detail_wrap {
		.title-btn {
			color: #4298FF;
		}

		.form_item {
			padding-top: 24rpx;
			color: #666;
			font-size: 28rpx;

			.red {
				color: #F5564D;
			}
		}

		// .images-grid {
		// 	display: grid;
		// 	grid-template-columns: repeat(4, 1fr);
		// 	gap: 16rpx;
		// 	margin-top: 24rpx;

		// 	.image-item {
		// 		aspect-ratio: 1;
		// 		border-radius: 8rpx;
		// 		overflow: hidden;

		// 		image {
		// 			width: 100%;
		// 			height: 100%;
		// 		}
		// 	}
		// }
	}
</style>